<template>
  <view class="threeModel">
    <view id="modelBox"></view>
  </view>
</template>

<script>
import borderData from "./housePolygon.json";
import * as THREE from "three";
import {
  coloring,
  lon2xy
} from "@/utils/common"
import {
  OrbitControls
} from "three/examples/jsm/controls/OrbitControls";
import {
  TextGeometry
} from "three/examples/jsm/geometries/TextGeometry.js";
import {
  FontLoader
} from "three/examples/jsm/loaders/FontLoader.js";
import {
  FBXLoader
} from "three/examples/jsm/loaders/FBXLoader.js";
import {
  Line3
} from "three";

import {
  CSS2DObject,
  CSS2DRenderer,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";

import {
  CSS3DObject,
  CSS3DRenderer,
} from "three/examples/jsm/renderers/CSS3DRenderer.js";

var scene,
  camera,
  renderer,
  renderer2,
  peitaoGroup,
  floorGroup,
  roadGroup,
  houseLineGroup,
  houseLineTextGroup,
  directionalLight;
var hUnit = 1;
var mUnit = 1000000;



export default {
  name: "threeModel",
  data() {
    return {
      borderData: borderData,
      _borderData: [], // 楼房基础数据
      _bounds: [], // 楼房四至
      _center: [], // 楼房中心点
      colors: {
        1: "rgb(255,226,200)",
        2: "rgb(255,226,200)",
        3: "rgb(255,189,177)",
        4: "rgb(255,146,143)",
        5: "rgb(253,99,99)",
        6: "rgb(253,99,99)",
        7: "rgb(238,60,60)",
        8: "rgb(205,2,5)",
        9: "rgb(205,2,5)",
        10: "rgb(205,2,5)",
      },
      type: 1, //1:日照,2:户型，3：楼间距
      lights: [{
        name: "不足",
        color: "rgb(255,226,200)"
      },
      {
        name: "较弱",
        color: "rgb(255,189,177)"
      },
      {
        name: "普通",
        color: "rgb(255,146,143)"
      },
      {
        name: "良好",
        color: "rgb(254,98,99)"
      },
      {
        name: "优秀",
        color: "rgb(236,60,61)"
      },
      {
        name: "极佳",
        color: "rgb(205,2,5)"
      }
      ],
      houseName: "--",
      batchs: [],
      batchIndex: 0,
      roomTypes: [],
      buildings: [],
      buildingIndex: 0,
      houseId: null,
      // sun1:[
      // 	{
      // 		time:8,
      // 		x:25.9,
      // 		y:
      // 	}
      // ]
    };
  },
  computed: {

    roomActiveTypes() {
      return this.roomTypes.reduce((pre, cur) => {
        if (cur.checked) {
          pre.push(cur.name)
        }
        return pre
      }, [])
    }
  },

  mounted() {
    this.initContainer(this.borderData);
  },
  methods: {

    chooseRoomType(item) {
      item.checked = !item.checked;
      this.renderRoomType()
    },
    renderRoomType() {
      if (this.batchIndex !== 0) {
        scene.getObjectByName("floorGroup").children.map((item) => {
          if (this.roomActiveTypes.length === 0) {
            if (
              item.userData.type === "building" &&
              item.userData.qishu == this.batchs[this.batchIndex]
            ) {
              item.material.color.set(new THREE.Color(item.userData.bgColor));
            } else {
              if (item.userData.type === "building") {
                item.material.color.set(new THREE.Color(item.userData.color));
              }
            }
          } else {
            if (
              item.userData.type === "building" &&
              item.userData.qishu == this.batchs[this.batchIndex] && this.roomActiveTypes
                .indexOf(item.userData.room_type) > -1
            ) {
              item.material.color.set(new THREE.Color(item.userData.bgColor));
            } else {
              if (item.userData.type === "building") {
                item.material.color.set(new THREE.Color(item.userData.color));
              }
            }
          }
        });
      } else {
        if (this.roomActiveTypes.length === 0) {
          scene.getObjectByName("floorGroup").children.map((item) => {
            if (
              item.userData.type === "building"
            ) {
              item.material.color.set(new THREE.Color(item.userData.bgColor));
            } else {
              if (item.userData.type === "building") {
                item.material.color.set(new THREE.Color(item.userData.color));
              }
            }
          });
        } else {
          scene.getObjectByName("floorGroup").children.map((item) => {
            if (
              item.userData.type === "building" && this.roomActiveTypes.indexOf(item
                .userData
                .room_type) >
              -1
            ) {
              item.material.color.set(new THREE.Color(item.userData.bgColor));
            } else {
              if (item.userData.type === "building") {
                item.material.color.set(new THREE.Color(item.userData.color));
              }
            }
          })
        }
      }
    },
    //批次选择
    batchPickerChange(e) {
      console.log(scene)
      this.batchIndex = e.detail.value;
      if (this.type === 1) {
        if (this.batchIndex !== 0) {
          scene.getObjectByName("floorGroup").children.map((item) => {
            // item.visible = true;
            if (
              item.userData.type === "building" &&
              item.userData.qishu == this.batchs[this.batchIndex]
            ) {
              //设置材质颜色
              item.material.color.set(new THREE.Color(item.userData.color));
            } else {
              if (item.userData.type === "building") {
                // item.visible = false;
                item.material.color.set(new THREE.Color("#ffffff"));
              }
            }

            if (
              item.userData.type === "floor-tag" &&
              item.userData.qishu == this.batchs[this.batchIndex]
            ) {

              // item.element.style.color = "#42b983";
              // item.element.style.border = "1px solid #42b983";
            } else {
              if (item.userData.type === "floor-tag") {
                // item.element.style.color = "#cccccc";
                // item.element.style.border = "1px solid #cccccc";
                // item.visible = false;
              }
            }
          });
        } else {
          scene.getObjectByName("floorGroup").children.map((item) => {

            if (item.userData.type === "building") {
              // item.visible = true;
              item.material.color.set(new THREE.Color(item.userData.color));
            }

            if (item.userData.type === "floor-tag") {
              // item.visible = true;
              // item.element.style.color = "#cccccc";
              // item.element.style.border = "1px solid #cccccc";
            }
          });
        }
      }
      if (this.type === 2) {
        this.renderRoomType()
      }

    },
    //楼栋选择
    buildingPickerChange(e) {
      this.buildingIndex = e.detail.value;

      if (this.buildingsIndex !== 0) {
        let num = this.buildings[this.buildingIndex].toString()

        scene.getObjectByName("floorGroup").children.map((item) => {
          if (
            item.userData.type === "building" &&
            item.userData.building_n === num
          ) {

            item.material.color.set(new THREE.Color("rgb(248,157,117)"));
          } else {
            if (item.userData.type === "building") {

              item.material.color.set(new THREE.Color("#ffffff"));
            }

          }

          if (
            item.userData.type === "floor-tag" &&
            item.userData.building_n === num
          ) {

            item.element.style.color = "rgb(248,157,117)";
            item.element.style.border = "1px solid rgb(248,157,117)";
          } else {

            if (item.userData.type === "floor-tag") {

              item.element.style.color = "#cccccc";
              item.element.style.border = "1px solid #cccccc";
            }

          }
        });


        scene.getObjectByName("houseLineGroup").children.map((item) => {
          if (item.userData.lou && item.userData.lou.indexOf(num) > -1) {
            //设置材质颜色
            item.material.color.set(new THREE.Color("rgb(248,157,117)"));
          } else {
            item.material.color.set(new THREE.Color("#3f96f1"));
          }
        });

        scene.getObjectByName("houseLineTextGroup").children.map((item) => {
          if (item.userData.lou && item.userData.lou.indexOf(num) > -1) {
            //设置材质颜色
            item.element.style.color = "rgb(248,157,117)";
            item.element.style.backgroundColor = "rgb(255,255,255)"
          } else {
            item.element.style.color = "#3f96f1";
            item.element.style.backgroundColor = "transparent"
          }
        });
      } else {
        scene.getObjectByName("floorGroup").children.map((item) => {
          if (item.userData.type === "building") {

            item.material.color.set(new THREE.Color("#ffffff"));
          }

          if (item.userData.type === "floor-tag") {

            item.element.style.color = "#cccccc";
            item.element.style.border = "1px solid #cccccc";
          }
        });


        scene.getObjectByName("houseLineGroup").children.map((item) => {
          item.material.color.set(new THREE.Color("#3f96f1"));
        });

        scene.getObjectByName("houseLineTextGroup").children.map((item) => {
          item.element.style.color = "#3f96f1";
          item.element.style.backgroundColor = "transparent"
        });
      }

    },
    // 创建场景
    initContainer(borderData) {
      /*创建场景对象Scene*/
      scene = new THREE.Scene();
      //scene.rotation.set(-90, 0, 45);
      peitaoGroup = new THREE.Group();
      peitaoGroup.name = "peitaoGroup";
      scene.add(peitaoGroup);

      floorGroup = new THREE.Group();
      floorGroup.name = "floorGroup";
      scene.add(floorGroup);

      roadGroup = new THREE.Group();
      roadGroup.name = "roadGroup";
      scene.add(roadGroup);

      houseLineGroup = new THREE.Group();
      houseLineGroup.name = "houseLineGroup";
      scene.add(houseLineGroup);

      houseLineTextGroup = new THREE.Group();
      houseLineTextGroup.name = "houseLineTextGroup";
      scene.add(houseLineTextGroup);

      this.initLight();
      this.initCamera();

      this.render();

      //let clock = new THREE.Clock(); //用于更新轨道控制器

      //创建平面
      this.createPlane();

      // 添加楼房楼层平面

      this.addFloors(borderData);
      this.animate();
    },
    createPlane() {
      const geometry = new THREE.PlaneGeometry(1500, 1500);
      const material = new THREE.MeshLambertMaterial({
        color: 0xd9e6ec,
        side: THREE.DoubleSide,
      });
      const plane = new THREE.Mesh(geometry, material);
      plane.position.z = -5;
      scene.add(plane);
      plane.receiveShadow = true; // 平面将接收阴影
    },
    /* 光源设置*/
    initLight() {

      //光源设置
      const ambient = new THREE.AmbientLight(0xcccccc);
      scene.add(ambient);

      //if (this.type !== 1) return;
      directionalLight = new THREE.DirectionalLight(0xcccccc, 1);
      directionalLight.position.set(100, -100, 100);
      scene.add(directionalLight); //平行光

      // 设置产生阴影的光源对象,开启光源阴影的计算功能
      directionalLight.castShadow = true;

      // console.log('阴影相机属性',directionalLight.shadow.camera);
      // 设置三维场景计算阴影的范围
      directionalLight.shadow.camera.left = -200;
      directionalLight.shadow.camera.right = 200;
      directionalLight.shadow.camera.top = 300;
      directionalLight.shadow.camera.bottom = -200;
      directionalLight.shadow.camera.near = 0.5;
      directionalLight.shadow.camera.far = 500;
      directionalLight.shadow.mapSize.set(2048, 2048);

      // 模糊弱化阴影边缘
      directionalLight.shadow.radius = 3;
      // 可视化平行光阴影对应的正投影相机对象
      // const cameraHelper = new THREE.CameraHelper(
      //   directionalLight.shadow.camera
      // );
      // scene.add(cameraHelper);


      // model
      // var loader = new FBXLoader();
      // loader.load('https://xfbd.oss-cn-hangzhou.aliyuncs.com/svg/sun_spring.fbx', function(object) {

      // 	//播放动画
      // 	//  mixer = new THREE.AnimationMixer( object );
      // 	//  var action = mixer.clipAction( object.animations[ 0 ] );
      // 	//  action.play();
      // 	//渲染阴影
      // 	// object.traverse( function ( child ) {
      // 	//
      // 	//     if ( child.isMesh ) {
      // 	//
      // 	//         child.castShadow = true;
      // 	//         child.receiveShadow = true;
      // 	//
      // 	//     }
      // 	//
      // 	// } );
      // 	object.scale.set(0.01, 0.01, 0.01); //修改模型缩放系数(x,y,z)
      // 	scene.add(object);



      // });
    },
    initCamera() {
      /**
       * 相机设置
       */
      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 1500; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        10000
      );
      camera.position.set(300, -300, 300);
      camera.up.set(0, 0, 1);
      camera.lookAt(0, 0, 0);
    },

    animate() {
      if (this.type === 1) {
        if (directionalLight.position.x <= -100) {
          directionalLight.position.x = 100;
        }
        directionalLight.position.x = directionalLight.position.x - 1;
      }


      renderer.render(scene, camera);
      renderer2.render(scene, camera);
      requestAnimationFrame(this.animate);
    },

    render() {
      let dom = document.getElementById("modelBox");
      /**
       * 创建渲染器对象
       */
      renderer = new THREE.WebGLRenderer({
        antialias: true,
      });
      renderer.setPixelRatio(window.devicePixelRatio); //防止输出模糊
      renderer.setSize(window.innerWidth, window.innerHeight);
      dom.appendChild(renderer.domElement);
      renderer.setClearColor(new THREE.Color(0xcce0ff));
      renderer.shadowMap.enabled = true;

      var controls = new OrbitControls(camera, renderer.domElement);
      controls.target = new THREE.Vector3(0, 0, 0); //控制焦点
      controls.autoRotate = false; //将自动旋转关闭

      controls.minPolarAngle = 0;
      controls.maxPolarAngle = Math.PI / 2;

      //设置dom元素的渲染
      renderer2 = new CSS3DRenderer();
      renderer2.setSize(window.innerWidth, window.innerHeight);
      renderer2.domElement.style.position = "absolute";
      renderer2.domElement.style.top = 0;
      dom.appendChild(renderer2.domElement);
      var controls2 = new OrbitControls(camera, renderer2.domElement);
      controls2.target = new THREE.Vector3(0, 0, 0); //控制焦点
      controls2.autoRotate = false; //将自动旋转关闭

      controls2.minPolarAngle = 0;
      controls2.maxPolarAngle = Math.PI / 2;
      console.log(scene)
    },
    // 添加楼群
    addFloors(data) {
      // 数据处理/基础数据计算
      this._dataAnalysis(data);
      this._getModelBounds();
      this._getModelCenter();
      this._dataAnalysisAll();

      // 添加楼层
      this._borderData.forEach((res) => {
        if (res.type === "building") {
          if (this.type === 2) {
            if (!(this.roomTypes.find(item => item.name === res.room_type))) {
              let bgColor = coloring();
              this.roomTypes.push({
                name: res.room_type,
                bgColor,
                checked: false
              })
              res.bgColor = bgColor;
            } else {
              res.bgColor = this.roomTypes.find(item => item.name === res.room_type)
                .bgColor;
            }
          }

          if (this.type === 1 || this.type === 2) {
            if (res.qishu) {
              if (this.batchs.indexOf(res.qishu) === -1) {
                this.batchs.push(res.qishu)
              }
            }
          }



          if (this.type === 3) {
            if (res.building_n) {
              if (this.buildings.indexOf(res.building_n) === -1) {
                this.buildings.push(res.building_n)
              }
            }

          }

          this.createFloor(res);



        }
        // else if (res.type === "road") {
        //   this.createRoad(res);
        // } else if (res.type === "peitao") {
        //   this.createPeitao(res);
        // } else if (res.geometryType === "MultiLineString") {
        //   if (this.type === 3) {
        //     this.createHouseLine(res);
        //   }

        // }


      });


      if (this.type === 1 || this.type === 2) {
        this.batchs.sort((a, b) => {
          return a - b;
        })
        this.batchs.unshift("全部批次")
      }

      if (this.type === 3) {
        this.buildings.sort((a, b) => {
          return a - b;
        })
        this.buildings.unshift("全部楼栋")
      }
    },

    //创建路的平面
    createRoadShape(data) {
      var shape = new THREE.Shape();
      data.map((item, index) => {
        if (index === 0) {
          item.forEach((e, i) => {
            if (i === 0) {
              shape.moveTo(...e);
            } else {
              shape.lineTo(...e);
            }
          });
        } else {
          const path = new THREE.Path();
          item.forEach((e, i) => {
            if (i === 0) {
              path.moveTo(...e);
            } else {
              path.lineTo(...e);
            }
          });
          shape.holes.push(path);
        }
      });

      return shape;
    },
    //添加线
    createHouseLine(data) {
      if (data.points) {
        const points = [];
        var pos1 = null;
        var pos2 = null;
        data.points.map((item, index) => {
          if (index === 0) {
            pos1 = new THREE.Vector3(item[0], item[1], 0);
          } else if (index === 1) {
            pos2 = new THREE.Vector3(item[0], item[1], 0);
          }
          points.push(new THREE.Vector3(item[0], item[1], 0));
        });
        const material = new THREE.LineBasicMaterial({
          color: 0x3f96f1
        });
        const geometry = new THREE.BufferGeometry().setFromPoints(points);
        const line = new THREE.Line(geometry, material);
        line.position.z = 0;
        line.userData = data;
        houseLineGroup.add(line);

        var distance = pos1.distanceTo(pos2).toFixed(0) * 1;
        var center = new THREE.Vector3();
        var linePath = new Line3(pos1, pos2);
        linePath.getCenter(center);
        this.addLineText(distance + "", center, data);
      }
    },
    //添加楼间线段文字

    //添加标注
    addLineText(distance, center, data) {
      const element = document.createElement("div");
      var fontSize = 16;
      element.className = "distance";
      element.innerText = `${distance}`;
      const object = new CSS3DObject(element);
      object.position.x = center.x;
      object.position.y = center.y;
      object.position.z = 0;
      object.scale.set(0.1, 0.1, 0.1);
      object.userData = data;
      houseLineTextGroup.add(object);
    },
    //添加配套
    createPeitao(data) {
      let shape = this.createShape(data.points[0]);
      for (let i = 0; i < data.floor; i++) {
        let mesh = this.createPolyline(shape, i, data.high, 0xffffff, data);
        peitaoGroup.add(mesh);
      }
    },
    //添加路面
    createRoad(data) {
      let shape = this.createRoadShape(data.points);
      var geometry = new THREE.ShapeGeometry(shape);
      var cubeMaterial = new THREE.MeshLambertMaterial({
        color: 0xb7b9c8,
        // transparent: true,
        opacity: 1,
        // side: THREE.DoubleSide, // 强制双面
      });
      let mesh = new THREE.Mesh(geometry, cubeMaterial);
      mesh.position.z = 1;
      // 设置接收阴影的投影面
      mesh.castShadow = true;
      mesh.receiveShadow = true;
      roadGroup.add(mesh);
    },
    // 添加单个楼
    createFloor(data) {
      console.log(data)
      // 新建楼房组
      let shape = this.createShape(data.points[0]);
      for (let i = 0; i < data.floor; i++) {
        let mesh = this.createPolyline(
          shape,
          i,
          data.high,
          this.type === 1 ? this.colors[parseInt(data.sun_q1.split(",")[i])] : 0xffffff,
          data
        );
        floorGroup.add(mesh);
      }
      if (floorGroup.children[0]) {
        this.createFloorTag(data);
      }
    },
    createFloorTag(data) {
      var center = this.getCenterPoint(
        floorGroup.children[floorGroup.children.length - 1]
      );
      center.z = (data.floor + 1) * data.high * hUnit;
      const element = document.createElement("div");
      element.className = "tag";
      element.innerText = `${data.building_n}`;
      const object = new CSS3DObject(element);
      //object.visible = true;
      //缩放比例
      object.scale.set(0.2, 0.2, 0.2);
      //指定摆放位置
      object.position.copy(center);
      object.rotation.y = 0;
      object.rotation.z = 0;
      object.rotation.x = Math.PI / 2;
      object.userData = {
        ...data,
        type: "floor-tag"
      };
      floorGroup.add(object);
    },
    //获取楼栋中点
    getCenterPoint(mesh) {
      var middle = new THREE.Vector3();
      var geometry = mesh.geometry;

      geometry.computeBoundingBox();

      middle.x = (geometry.boundingBox.max.x + geometry.boundingBox.min.x) / 2;
      middle.y = (geometry.boundingBox.max.y + geometry.boundingBox.min.y) / 2;
      middle.z = (geometry.boundingBox.max.z + geometry.boundingBox.min.z) / 2;

      return middle;
    },
    // 数据转换
    _dataAnalysis(borderData) {
      let data = [];
      borderData.features.forEach((res) => {
        if (
          res.geometry.type === "polygon" ||
          res.geometry.type === "MultiLineString"
        ) {
          res.geometry.coordinates.forEach((r) => {
            // 将度转换为米
            r = r.map((re) => {
              // return [
              // 	(re[0] * mUnit).toFixed(0) * 1,
              // 	(re[1] * mUnit).toFixed(0) * 1,
              // ];
              let lnglat = lon2xy(parseFloat(re[0]), parseFloat(re[1]))
              return [
                lnglat.x,
                lnglat.y,
              ];
            });
            data.push({
              ...res.properties,
              geometryType: res.geometry.type,
              points: r,
            });
          });
        } else if (res.geometry.type === "MultiPolygon") {
          let pointArrs = [];
          res.geometry.coordinates.forEach((r) => {
            // 将度转换为米
            r.map((re) => {
              let pr = [];
              re.map((ree) => {
                // pr.push([
                // 	(ree[0] * mUnit).toFixed(0) * 1,
                // 	(ree[1] * mUnit).toFixed(0) * 1,
                // ]);
                let lnglat = lon2xy(parseFloat(ree[0]), parseFloat(ree[
                  1]))
                pr.push([
                  lnglat.x,
                  lnglat.y,
                ]);
              });
              pointArrs.push(pr);
            });
          });
          data.push({
            ...res.properties,
            geometryType: res.geometry.type,
            points: pointArrs,
          });
        }
      });
      this._borderData = data;
    },
    // 获取模型四至
    _getModelBounds() {
      // 四至： 上右下左
      let bounds = [0, 0, 0, 0];
      // 所有点数组
      let pointArr = [];
      // 所有点经度数组
      let pointLonArr = [];
      // 所有点纬度数组
      let pointLatArr = [];
      // 获取所有点数组
      this._borderData.forEach((res) => {
        if (
          res.geometryType === "polygon" ||
          res.geometryType === "MultiLineString"
        ) {
          pointArr = pointArr.concat(res.points);
        } else if (res.geometryType === "MultiPolygon") {
          res.points.map((item) => {
            pointArr = pointArr.concat(item);
          });
        }
      });
      // 获取经度、纬度数组
      pointArr.forEach((res) => {
        pointLonArr.push(res[0]);
        pointLatArr.push(res[1]);
      });
      // 获取四至
      bounds = [
        Math.max(...pointLatArr),
        Math.min(...pointLonArr),
        Math.min(...pointLatArr),
        Math.max(...pointLonArr),
      ];
      this._bounds = bounds;
    },
    // 获取模型中心点
    _getModelCenter() {
      let center = [
        (this._bounds[1] + this._bounds[3]) / 2,
        (this._bounds[0] + this._bounds[2]) / 2,
      ];
      this._center = center;
    },
    // 数据转换2-将数据移动至原点
    _dataAnalysisAll() {
      this._borderData.forEach((res) => {
        if (
          res.geometryType === "polygon" ||
          res.geometryType === "MultiLineString"
        ) {
          res.points.forEach((re) => {
            re[0] = re[0] - this._center[0];
            re[1] = re[1] - this._center[1];
          });
        } else if (res.geometryType === "MultiPolygon") {
          res.points.forEach((re) => {
            re.map((ree) => {
              ree[0] = ree[0] - this._center[0];
              ree[1] = ree[1] - this._center[1];
            });
          });
        }
      });
    },
    // 创建平面集合
    createShape(data) {
      var shape = new THREE.Shape();
      data.forEach((e, i) => {
        if (i === 0) {
          shape.moveTo(...e);
        } else {
          shape.lineTo(...e);
        }
      });
      return shape;
    },
    // 创建透明平面
    createPolyline(shape, h, high, color = 0xffffff, userData = {}) {
      var geometry = new THREE.ExtrudeGeometry(shape, {
        depth: high * hUnit,
      });
      var cubeMaterial = new THREE.MeshLambertMaterial({
        color: color,
        // transparent: true,
        opacity: 1,
        //side: THREE.DoubleSide, // 强制双面
      });
      var mesh = new THREE.Mesh(geometry, cubeMaterial);
      mesh.castShadow = true;
      mesh.receiveShadow = true;
      mesh.position.z = h * high * hUnit;
      mesh.userData = {
        ...userData,
        color: color
      };
      // 长方体作为EdgesGeometry参数创建一个新的几何体
      const edges = new THREE.EdgesGeometry(geometry);
      const edgesMaterial = new THREE.LineBasicMaterial({
        color: 0xcccccc,
      });
      const line = new THREE.LineSegments(edges, edgesMaterial);
      mesh.add(line);
      return mesh;
    },

    choose(num = "2") {

      console.log(scene.getObjectByName("floorGroup"));
      scene.getObjectByName("floorGroup").children.map((item) => {
        if (
          item.userData.type === "building" &&
          item.userData.building_n === num
        ) {
          //设置材质颜色
          item.material.color.set(new THREE.Color(0x42b983));
        }

        if (
          item.userData.type === "floor-tag" &&
          item.userData.building_n === num
        ) {
          //设置材质颜色
          item.element.style.color = "#42b983";
          item.element.style.border = "1px solid #42b983";
        }
      });

      scene.getObjectByName("houseLineGroup").children.map((item) => {
        if (item.userData.lou && item.userData.lou.indexOf(num) > -1) {
          //设置材质颜色
          item.material.color.set(new THREE.Color(0x42b983));
        }
      });

      scene.getObjectByName("houseLineTextGroup").children.map((item) => {
        if (item.userData.lou && item.userData.lou.indexOf(num) > -1) {
          //设置材质颜色
          item.element.style.color = "#42b983";
          item.element.style.background = "#ffffff";
        }
      });
      console.log(scene.getObjectByName("houseLineTextGroup"));
    },
  },
};
</script>

<style scoped>
.threeModel {
  /* // background: url("../../../assets/images/loop.png") no-repeat;
  // background-size: 100% 100%; */
  width: 100%;
  height: 100%;
  position: relative;
}

#modelBox {
  width: 100%;
  height: 100%;
  background: #d9e6ec;
}

.btn1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
</style>